<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>成都-上海</title>
    <!--引入css-->
    <link rel="stylesheet" href="../../css/reset.css" />
    <link rel="stylesheet" href="../../css/public.css" />
    <link rel="stylesheet" href="../../css/form.css" />
    <link rel="stylesheet" href="../../css/LCalendar.css" />
    <link rel="stylesheet" href="../../css/order.css" />
    <script type="text/javascript">
        if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {
            var version = parseFloat(RegExp.$1);
            if (version > 2.3) {
                var phoneScale = parseInt(window.screen.width) / 750;
                document.write('<meta name="viewport" content="width=750, minimum-scale = ' + phoneScale +
                    ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
            } else {
                document.write('<meta name="viewport" content="width=750, target-densitydpi=device-dpi">');
            }
        } else {
            document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">');
        }
    </script>
</head>

<body class="bg-fafafc">
    <div class="flight-info-box mb2">
        <div class="flight-num clear">
            <p class="fl ellipsis">
                <span class="tips">去</span>
                <span class="logo">
                    <img src="../../upload/img-boat.png" alt="" />
                </span>
                <span class="name">
                    联航KN5955 共享
                </span>
                <span>|</span>
                <span class="name">
                    波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）
                </span>
            </p>
            <p class="fr text-right">
                <i class="icon-long"></i>
                <span>12h42m</span>
            </p>
        </div>
        <div class="flight-info box">
            <div class="info-box flex1 text-right">
                <p class="date">11-04 周六</p>
                <p class="time">19:28</p>
                <p class="address ellipsis">双流机场T1</p>
            </div>
            <div class="transfer-box flex1 text-center">
                <p class="tips">
                    <span>转</span>
                </p>
                <p class="address ellipsis">乌鲁木齐、某某地方乌鲁木齐、某某地方</p>
                <p class="details">中转详情&gt;</p>
            </div>
            <div class="info-box flex1 text-left">
                <p class="date">11-04 周六</p>
                <p class="time">19:28</p>
                <p class="address ellipsis">双流机场T1</p>
            </div>
        </div>
        <div class="flight-tips clear">
            <p class="tips fl">预计支付成功后123分钟内出票</p>
            <p class="details fr text-right">退改签详情&gt;</p>
        </div>
    </div>
    <div class="flight-info-box">
        <div class="flight-num clear">
            <p class="fl ellipsis">
                <span class="tips">返</span>
                <span class="logo">
                    <img src="../../upload/img-boat.png" alt="" />
                </span>
                <span class="name">
                    联航KN5955 共享
                </span>
                <span>|</span>
                <span class="name">
                    波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）波音737（中）
                </span>
            </p>
            <p class="fr text-right">
                <i class="icon-long"></i>
                <span>12h42m</span>
            </p>
        </div>
        <div class="flight-info box">
            <div class="info-box flex1 text-right">
                <p class="date">11-04 周六</p>
                <p class="time">19:28</p>
                <p class="address ellipsis">双流机场T1</p>
            </div>
            <div class="transfer-box flex1 text-center">
                <p class="tips">
                    <span>转</span>
                </p>
                <p class="address ellipsis">乌鲁木齐、某某地方乌鲁木齐、某某地方</p>
                <p class="details">中转详情&gt;</p>
            </div>
            <div class="info-box flex1 text-left">
                <p class="date">11-04 周六</p>
                <p class="time">19:28</p>
                <p class="address ellipsis">双流机场T1</p>
            </div>
        </div>
        <div class="flight-tips clear">
            <p class="tips fl">预计支付成功后123分钟内出票</p>
            <p class="details fr text-right">退改签详情&gt;</p>
        </div>
    </div>

    <div class="passenger-entr form-box clear">
        <p class="tit fl">乘机人
            <span>（最多可添加9人）</span>
        </p>
        <p id="js-add-passenger" class="btn fr">
            <i class="icon-head-add"></i>
        </p>
    </div>
    <div class="form-box">
        <ul class="passenger-list">
            <li>
                <i class="icon-reduce"></i>
                <div class="info">
                    <h5>李晨晨</h5>
                    <p>232949171819274759</p>
                </div>
                <i class="icon-arrow-gt"></i>
            </li>
            <li>
                <i class="icon-reduce"></i>
                <div class="info">
                    <h5>李晨晨</h5>
                    <p>232949171819274759</p>
                </div>
                <i class="icon-arrow-gt"></i>
            </li>
        </ul>
    </div>

    <div class="form-box">
        <ul class="contact-list">
            <li class="box">
                <p class="flex28 tit">
                    <span>联系人</span>
                </p>
                <p class="flex66 info">
                    <input type="text" class="input" placeholder="联系人姓名">
                    <i class="icon-del none"></i>
                </p>
            </li>
            <li class="box">
                <p class="flex28 tit">
                    <span>联系手机</span>
                    <!-- <i class="icon-arrow-down"></i> -->
                </p>
                <p class="flex66 info">
                    <input type="text" class="input" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)"
                        onblur="this.val();" placeholder="用于接收出票信息">
                    <i class="icon-del none"></i>
                </p>
            </li>
        </ul>
    </div>

    <div class="form-box">
        <div class="insurance-tit clear">
            <i class="icon-insurance fl"></i>
            <div class="info fl">
                <h4>航空险</h4>
                <p>放心、安全出行</p>
            </div>
            <p class="fr insurance-more">
                <i class="icon-arrow-gt"></i>
            </p>
        </div>
        <div class="insurance-info">
            <ul class="">
                <li class="box">
                    <p class="name flex28">航空组合险</p>
                    <p class="price flex66">¥
                        <span>45</span>/人x
                        <span>2</span>份x
                        <span>1</span>程</p>
                </li>
                <li class="box">
                    <p class="name flex28">航空险A款</p>
                    <p class="price flex66">¥
                        <span>30</span>/人x
                        <span>2</span>份x
                        <span>1</span>程</p>
                </li>
                <li class="box">
                    <p class="name flex28">航空险B款</p>
                    <p class="price flex66">¥
                        <span>20</span>/人x
                        <span>2</span>份x
                        <span>1</span>程</p>
                </li>
            </ul>
            <i class="icon-arrow-gt"></i>
        </div>
    </div>
    <div class="form-box">
        <div class="insurance-tit clear">
            <i class="icon-insurance fl"></i>
            <div class="info fl">
                <h3>
                    <span>航空组合险</span>
                    <i class="insurance-btn icon-tips-5fc"></i>
                </h3>
            </div>
            <p class="fr insurance-more clear">
                <span class="text fr">更多保险</span>
                <i class="icon-arrow-gt fr"></i>
            </p>
        </div>
        <div class="insurance-recom clear">
            <p class="hook-box select fl">
                <i class="icon-hook select"></i>
            </p>
            <div class="info fl">
                <h4>航空险</h4>
                <p>放心、安全出行</p>
            </div>
            <p class="price fr">¥
                <span>45</span>/人x
                <span>2</span>份x
                <span>1</span>程</p>
        </div>
    </div>
    <div class="form-box">
        <div class="expense-tit clear">
            <i class="icon-expense fl"></i>
            <div class="info fl">
                <h4>报销凭证</h4>
                <p>含：行程单、快递发票</p>
            </div>
            <div class="switch-box">
                <div class="switch-btn">
                    <input class="checked-switch" />
                    <span class="text-switch"></span>
                    <span class="toggle-btn"></span>
                </div>
            </div>
        </div>
        <ul class="expense-list">
            <li class="box">
                <div class="flex28 tit">
                    <p>配送费用</p>
                </div>
                <div class="flex72 info">
                    <h5 class="c-00b3cd">￥
                        <span>45</span>
                    </h5>
                    <p>预计2017.12.21前寄出</p>
                </div>
            </li>
            <li class="box">
                <div class="flex28 tit">
                    <p>发票抬头</p>
                </div>
                <div class="flex72 info">
                    <p class="add">添加火选择发票抬头</p>
                </div>
                <i class="icon-arrow-gt"></i>
            </li>
            <li class="box">
                <div class="flex28 tit">
                    <p>配送地址</p>
                </div>
                <div class="flex72 info">
                    <p class="add">添加火选择配送地址</p>
                </div>
                <i class="icon-arrow-gt"></i>
            </li>
            <li class="box">
                <div class="flex28 tit">
                    <p>配送费用</p>
                </div>
                <div class="flex72 info">
                    <h5>测试</h5>
                    <p class="ellipsis">预计2017.12.21前寄出</p>
                </div>
                <i class="icon-arrow-gt"></i>
            </li>
            <li class="box">
                <div class="flex28 tit">
                    <p>配送费用</p>
                </div>
                <div class="flex72 info">
                    <h5>
                        <span class="name">姓名</span>
                        <span class="phone">电话</span>
                    </h5>
                    <p class="ellipsis">预计2017.12.21前寄出</p>
                </div>
                <i class="icon-arrow-gt"></i>
            </li>
        </ul>
    </div>
    
    <div class="form-box">
        <div class="discount-tit clear">
            <span class="discount-tip fl">优惠</span>
            <div class="info fl">
                <h3>
                    <span>20元抵扣券</span>
                </h3>
            </div>
            <div class="fr discount-more clear">
                <p class="price fr">- ¥ <span>20</span></p>
                <i class="icon-arrow-gt fr"></i>
            </div>
        </div>
    </div>
    <div class="purchase-notes">
        <p>购票及已阅读并同意
            <span>购买须知</span>、
            <span>保险经济委托协议</span>、
            <span>锂电池及危险品须知</span>
        </p>
    </div>
    <div class="empty-box"></div>
    <div class="detailed-bar">
        <div class="fl total">
            <p class="tit">订单总额</p>
            <p class="amount">
                <sub>￥</sub>
                <span>8485</span>
                <sup>.93</sup>
            </p>
        </div>
        <p class="fr book booking">预订</p>
        <p id="js-detailed-down" class="fr detailed">明细
            <i class="icon-up"></i>
        </p>
    </div>

    <div class="mask"></div>
    <!-- 费用明细弹窗 -->
    <div id="js-detailed-fixed" class="detailed-fixed fixed">
        <div class="fixed-tit">
            <h3></h3>
            <i class="icon-close"></i>
        </div>
        <ul class="detailed-list">
            <li class="box">
                <p class="flex72 c-333">火车票</p>
                <p class="flex28 text-right">
                    <span class="c-00b3cd">￥</span>
                    <span class="c-00b3cd">45</span> X
                    <span>1</span>张 </p>
            </li>
            <li class="box">
                <p class="flex72 c-333">20元交通意外保险</p>
                <p class="flex28 text-right">
                    <span class="c-00b3cd">￥</span>
                    <span class="c-00b3cd">20</span> X
                    <span>1</span>张 </p>
            </li>
            <li class="box">
                <p class="flex72 c-333">报销凭证</p>
                <p class="flex28 text-right">
                    <span class="c-00b3cd">￥</span>
                    <span class="c-00b3cd">20</span> X
                    <span>1</span>张 </p>
            </li>
        </ul>
        <div class="empty-box"></div>
        <div class="detailed-bar">
            <div class="fl total">
                <p class="tit">订单总额</p>
                <p class="amount">
                    <sub>￥</sub>
                    <span>8485</span>
                    <sup>.93</sup>
                </p>
            </div>
            <p class="fr book">预订</p>
            <p id="js-detailed-up" class="fr detailed">明细
                <i class="icon-down"></i>
            </p>
        </div>
    </div>


    <!-- 选择地址、发票弹窗 -->
    <div id="js-choise-list-fixed" class="choise-list-fixed  fixed">
            <div class="fixed-tit">
                <h3></h3>
                <i class="icon-close"></i>
            </div>
            <p class="btn-add">
                <i class="icon-add"></i>
                <span>添加乘客</span>
            </p>
            <p class="btn-add">
                <i class="icon-add"></i>
                <span>新增发票抬头</span>
            </p>
            <p class="btn-add">
                <i class="icon-add"></i>
                <span>新增地址</span>
            </p>
            <ul class="choise-list radio">
                <!-- 新增乘客 姓名  身份证  身份证号 -->
                <li class="clear">
                    <p class="btn-edit">
                        <i class="icon-edit"></i>
                    </p>
                    <div class="info select fl">
                        <h5>
                            <span class="name">姓名测试</span>
                        </h5>
                        <p class="ellipsis">
                            <span class="tit">身份证</span>
                            <span class="num">5112145412624512</span>
                        </p>
                    </div>
                    <p class="btn-select">
                        <i class="icon-select select"></i>
                    </p>
                </li>
                <!-- 新增发票抬头  个人 电话  公司  公司税号 -->
                <li class="clear">
                    <p class="btn-edit">
                        <i class="icon-edit"></i>
                    </p>
                    <div class="invoice">
                        <h5>
                            <span class="name">名字</span>
                            <span class="tag">个人</span>
                        </h5>
                        <p class="ellipsis">
                            <span class="tit">电话号码：</span>
                            <span>15454581212</span>
                        </p>
                    </div>
                    <p class="btn-select">
                        <i class="icon-select"></i>
                    </p>
                </li>
                <li class="clear">
                    <p class="btn-edit">
                        <i class="icon-edit"></i>
                    </p>
                    <div class="invoice">
                        <h5>
                            <span class="name">XXXX网络有有限公司络有限公司络有限公网络有限络有限公络有限公司</span>
                            <span class="tag">公司</span>
                        </h5>
                        <p class="ellipsis">
                            <span class="tit">公司税号：</span>
                            <span>6565654512341</span>
                        </p>
                    </div>
                    <p class="btn-select">
                        <i class="icon-select"></i>
                    </p>
                </li>
                <li class="clear">
                    <p class="btn-edit">
                        <i class="icon-edit"></i>
                    </p>
                    <div class="address">
                        <h5>
                            <span class="name">姓名</span>
                            <span class="phone">155425612158</span>
                        </h5>
                        <p class="ellipsis">
                            <span>成都市金牛区延期立交成都市金牛区延期立交</span>
                        </p>
                    </div>
                    <p class="btn-select">
                        <i class="icon-select"></i>
                    </p>
                </li>
            </ul>
            <div class="box db-btn">
                <p class="flex clear">清空</p>
                <p class="flex determine">确认</p>
            </div>
        </div>


    <!-- 添加乘客信息填写弹出层 -->
    <div id="js-add-form-cover" class="add-form-cover cover">
        <div class="passenger-form">
            <ul>
                <li class="box">
                    <p class="name flex30">
                        <span>姓名</span>
                    </p>
                    <p class="info flex66">
                        <input class="input" type="text" placeholder="如：李程程">
                        <span class="disclaimer-tips">
                            <i class="icon-tips-999"></i>
                        </span>

                    </p>
                </li>
                <li>
                    <div class="box bb-e1">
                        <p class="name flex30">
                            <span>姓（英文）</span>
                        </p>
                        <p class="info flex66">
                            <input class="input" type="text" placeholder="Li">
                        </p>
                    </div>
                    <div class="box">
                        <p class="name flex30">
                            <span>名（英文）</span>
                        </p>
                        <p class="info flex66">
                            <input class="input" type="text" placeholder="Cheng">
                        </p>
                    </div>
                    <span class="disclaimer-tips">
                        <i class="icon-tips-999"></i>
                    </span>

                </li>
                <li class="box">
                    <p id="js-certificates-box-01" class="name flex30 space-info certificates">
                        <span id="js-certificates-01">身份证</span>
                        <i class="icon-tri-down"></i>
                    </p>
                    <p class="info flex66">
                        <input class="input" type="text" placeholder="请填证件号码">
                    </p>
                </li>
                <li class="box">
                    <p class="name flex30">
                        <span>性别</span>
                    </p>
                    <div class="info flex66 gender">
                        <p class="or select">
                            <i class="icon-boy select"></i>
                            <span>男</span>
                        </p>
                        <p class="">
                            <i class="icon-girl"></i>
                            <span>女</span>
                        </p>
                    </div>
                </li>
                <li class="box">
                    <p class="name flex28">
                        <span>出生日期</span>
                    </p>
                    <p id="js-birth-num" class="info flex66">
                        <input type="text" name="birth" id="birth" class="input" placeholder="不支持婴儿票" readonly="readonly" />
                        <!-- <span class="c-999" id="trigger">不支持婴儿票</span> -->
                        <i class="icon-arrow-gt"></i>
                    </p>
                </li>
                <li class="box">
                    <p class="name flex30">
                        <span>手机号</span>
                    </p>
                    <p class="info flex66">
                        <input class="input" type="text" placeholder="如：12345768921">
                    </p>
                </li>
            </ul>
        </div>
        <div class="btn-big-box">
            <a id="js-save-btn" href="javascript:void(0);" class="btn-big">保存</a>
        </div>

        <div class="mask-high"></div>
        <!-- 浮动弹窗 -->
        <div id="js-card-popup-01" class="select-popup popup high">
            <div class="popup-tit">
                <h3></h3>
                <i class="icon-close"></i>
            </div>
            <ul class="select-list">
                <li class="select">
                    <p>身份证</p>
                    <i class="icon-select"></i>
                </li>
                <li>
                    <p>护照</p>
                    <i class="icon-select"></i>
                </li>
                <li>
                    <p>其他</p>
                    <i class="icon-select"></i>
                </li>
            </ul>
        </div>
        <!-- 定位弹窗 -->
    </div>

    <!-- 保险列表弹窗 -->
    <div id="js-insurance-list-cover" class="insurance-list-cover cover">
        <div class="insurance-list-box">
            <ul>
                <li>
                    <div class="insurance-item-tit">
                        <div class="box">
                            <h3 class="flex66">
                                <span>航空组合险</span>
                                <i class="insurance-btn icon-tips-5fc"></i>
                            </h3>
                            <p class="flex28 text-right">¥
                                <span>45</span>
                                /人x
                                <span>2</span>
                                程
                            </p>
                        </div>
                        <p class="info">航意险+航延险</p>
                    </div>
                    <ul class="passenger-box">
                        <li class="clear">
                            <p class="fl ellipsis">
                                <span class="hook-box select fl">
                                    <i class="icon-hook select"></i>
                                </span>
                                <span class="name">李某某李某某李某某李某某李某某李某某</span>
                            </p>
                            <p class="fl ellipsis">
                                <span class="hook-box select fl">
                                    <i class="icon-hook select"></i>
                                </span>
                                <span class="name">李某某</span>
                            </p>
                            <p class="fl ellipsis">
                                <span class="hook-box select fl">
                                    <i class="icon-hook select"></i>
                                </span>
                                <span class="name">李某某</span>
                            </p>
                            <p class="fl ellipsis">
                                <span class="hook-box select fl">
                                    <i class="icon-hook select"></i>
                                </span>
                                <span class="name">李某某</span>
                            </p>
                        </li>
                        <li class="clear">
                            <p class="fl ellipsis">
                                <span class="hook-box select fl">
                                    <i class="icon-hook select"></i>
                                </span>
                                <span class="name">李某某</span>
                            </p>
                            <p class="fl ellipsis">
                                <span class="hook-box select fl">
                                    <i class="icon-hook select"></i>
                                </span>
                                <span class="name">李某某</span>
                            </p>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="insurance-item-tit">
                        <div class="box">
                            <h3 class="flex66">
                                <span>航空组合险</span>
                                <i class="insurance-btn icon-tips-5fc"></i>
                            </h3>
                            <p class="flex28 text-right">¥
                                <span>45</span>
                                /人x
                                <span>2</span>
                                程
                            </p>
                        </div>
                        <p class="info">航意险+航延险</p>
                    </div>
                    <ul class="passenger-box">
                        <li class="clear">
                            <p class="fl ellipsis">
                                <span class="hook-box select fl">
                                    <i class="icon-hook select"></i>
                                </span>
                                <span class="name">李某某李某某李某某李某某李某某李某某</span>
                            </p>
                            <p class="fl ellipsis">
                                <span class="hook-box select fl">
                                    <i class="icon-hook select"></i>
                                </span>
                                <span class="name">李某某</span>
                            </p>
                            <p class="fl ellipsis">
                                <span class="hook-box select fl">
                                    <i class="icon-hook select"></i>
                                </span>
                                <span class="name">李某某</span>
                            </p>
                            <p class="fl ellipsis">
                                <span class="hook-box select fl">
                                    <i class="icon-hook select"></i>
                                </span>
                                <span class="name">李某某</span>
                            </p>
                        </li>
                        <li class="clear">
                            <p class="fl ellipsis">
                                <span class="hook-box select fl">
                                    <i class="icon-hook select"></i>
                                </span>
                                <span class="name">李某某</span>
                            </p>
                            <p class="fl ellipsis">
                                <span class="hook-box select fl">
                                    <i class="icon-hook select"></i>
                                </span>
                                <span class="name">李某某</span>
                            </p>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="js-insurance-determine" class="detailed-bar clear">
            <p class="fl text">往返组合购买保险含去程和返程</p>
            <p class="fr book">确定</p>
        </div>
    </div>

    <!-- 航空组合险说明弹窗 -->
    <div class="disclaimer-cover cover">
        <div class="cover-info">
            <h4>航空组合险</h4>
            <h5>一、税费及航空公司</h5>
            <p>1.每段航班均需缴纳机场建设费和燃油税；</p>
            <p>2.每段航班均需缴纳机场建设费和燃油税；每段 航班均需缴纳机场建设费和燃油税。
            </p>
            <h5>二、税费及航空公司</h5>
            <p>1.每段航班均需缴纳机场建设费和燃油税；</p>
            <p>2.每段航班均需缴纳机场建设费和燃油税；</p>
            <h5>三、税费及航空公司</h5>
            <p>1.每段航班均需缴纳机场建设费和燃油税；</p>
            <p>2.每段航班均需缴纳机场建设费和燃油税；每段 航班均需缴纳机场建设费和燃油税。
            </p>
            <h5>四、税费及航空公司</h5>
            <p>1.每段航班均需缴纳机场建设费和燃油税；</p>
            <p>2.每段航班均需缴纳机场建设费和燃油税；每段 航班均需缴纳机场建设费和燃油税。
            </p>
        </div>
        <p class="cover-btn">
            <i class="icon-close-cover"></i>
        </p>
    </div>

    <!-- 安全支付弹窗 -->
    <div id="js-payment-popup" class="payment-popup show">
        <div class="popup-tit">
            <h3>正在为您创建安全支付</h3>
        </div>
        <p class="roll-line">
            <span></span>
        </p>
        <div class="payment-info">
            <div class="trip">
                <i class="icon-address-333"></i>
                <h3>
                    <span>成都</span>
                    ——
                    <span>上海</span>
                </h3>
                <p>11月04日（周六） 20:24起飞</p>
                <p class="mb30">中国联航 KN5986</p>
                <p>返：11月04日（周六） 20:24起飞</p>
                <p class="mb30 ml50">中国联航 KN5986</p>
            </div>
            <!-- 以下一个div在订单填写显示 -->
            <div class="personnel clear">
                <i class="icon-pers-333"></i>
                <p>姓名1</p>
                <p>姓名2</p>
                <p>姓名3</p>
                <p>姓名4</p>
            </div>

            <!-- 以下两个div在订单列表显示 -->
            <div class="personnel">
                <i class="icon-pers-333"></i>
                <div>
                    <span>姓名1</span>、
                    <span>姓名2</span>、
                    <span>姓名3</span>、
                    <span>姓名4</span>、
                    <span>姓名5</span>、
                    <span>姓名6</span>
                </div>
            </div>
            <div class="info">
                <i class="icon-info-333"></i> 
                <ul>
                    <li class="box">
                        <p class="flex66">机票</p>
                        <p class="flex30 text-right c-00b3cd"><sub>￥</sub><span>450</span>X<span>3</span></p>
                    </li>
                    <li class="box">
                        <p class="flex66">原订单</p>
                        <p class="flex30 text-right c-fe6b6a">- <sub>￥</sub><span>280</span><span>3</span></p>
                    </li>
                    <li class="box pb15">
                        <p class="flex66">改签手续费</p>
                        <p class="flex30 text-right c-00b3cd"><sub>￥</sub><span>230</span></p>
                    </li>
                    <li class="box">
                        <p class="flex66">应付总额</p>
                        <p class="flex30 text-right c-00b3cd"><sub>￥</sub><span>1450</span></p>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 退票进度弹窗 -->
    <div id="js-speed-popup" class="speed-popup show">
        <div class="popup-tit">
            <h3>退票进度弹窗</h3>
        </div>
        <p class="roll-line">
            <span></span>
        </p>
        <div class="speed-list">
            <ul>
                <li class="c4bc1d2">
                    <span class="num">1</span>
                    <h5>提出申请</h5>
                    <p>11月04日（周六） 20:24 申请提交成功</p>
                </li>
                <li class="c4bc1d2">
                    <span class="num">2</span>
                    <h5>审核中</h5>
                    <p>11月04日（周六） 20:24 审核通过</p>
                </li>
                <li class="ffb2b1">
                    <span class="num">3</span>
                    <h5>提出申请</h5>
                    <p>11月04日（周六） 20:24 <span class="c-fe6b6a">退款失败</span> 如有疑问请联系客服，客服电话：400-123456</p>
                </li>
                <li class="c999">
                    <span class="num">4</span>
                    <h5>退款中</h5>
                </li>
            </ul>
        </div>
    </div>

    <!-- 退票原因选择弹窗 -->
    <div id="js-select-list-fixed" class="select-list-fixed fixed">
        <div class="fixed-tit">
            <h3></h3>
            <i class="icon-close"></i>
        </div>
        <ul class="select-list">
            <li>
                <p>我要取消行程、不想飞了或订错信息</p>
                <p class="btn-select">
                    <i class="icon-select"></i>
                </p>
            </li>
            <li>
                <p>旅客健康原因经医生证明不宜乘机，需要提供二级甲等及以上医院证明</p>
                <p class="btn-select">
                    <i class="icon-select"></i>
                </p>
            </li>
            <li>
                <p>因航司、机场或天气原因造成航班延误或取消申请退款</p>
                <p class="btn-select">
                    <i class="icon-select"></i>
                </p>
            </li>
        </ul>
    </div>
    <!-- 退票原因选择弹窗 -->
    <div id="js-consult-fixed" class="consult-fixed fixed">
        <div class="fixed-tit">
            <h3></h3>
            <i class="icon-close"></i>
        </div>
        <ul class="consult-list">
            <li>
                <p class="consult-icon">
                    <i class="icon-phone"></i>
                </p>
                <p>拨打客服电话 <span class="c-00b3cd">400-123456</span></p>
                <p class="btn-gt">
                    <i class="icon-arrow-gt"></i>
                </p>
            </li>
            <li>
                <p class="consult-icon">
                    <i class="icon-online"></i>
                </p>
                <p>联系在线客服</p>
                <p class="btn-gt">
                    <i class="icon-arrow-gt"></i>
                </p>
            </li>
        </ul>
    </div>


    <!--订单查询弹出层-->
    <div id="js-screen-fixed" class="screen-fixed fixed">
        <ul class="fixed-tit box">
            <li class="flex text-left cancel c-999">取消</li>
            <li id="js-person-num" class="flex reset text-center c-d9d9d9">重置</li>
            <li id="js-person-num-determine" class="flex text-right c-00b3cd determine">确定</li>
        </ul>
        <ul class="screen-info">
            <li class="box">
                <p class="flex32 tit">订单号</p>
                <p class="flex66"><input type="text" placeholder="请填写订单号" class="input"></p>
            </li>
            <li class="box">
                <p class="flex32 tit">乘车人姓名</p>
                <p class="flex66"><input type="text" placeholder="请填写乘车人姓名" class="input"></p>
            </li>
        </ul>
        <h5 class="screen-tit">订单状态</h5>
        <div class="screen-tabs">
            <a href="javascript:void (0);" class="screen-tab">待付款</a>
            <a href="javascript:void (0);" class="screen-tab">已付款</a>
            <a href="javascript:void (0);" class="screen-tab">其他/退款</a>
        </div>
        </ul>
        <h5 class="screen-tit">日期类型</h5>
        <div class="screen-time box">
            <p class="flex39 time"><input id="start_date" class="date" type="text"  placeholder="2017年7月18日"></p>
            <p class="flex22 text"><span><em>—</em>至<em>—</em></span></p>
            <p class="flex39 time"><input id="end_date" class="date" type="text" placeholder="2017年7月19日"></p>
        </div>
    </div>
        

    <!-- 保险选择弹窗 -->
    <ul id="js-insurance-fixed" class="insurance-fixed fixed">
        <ul class="fixed-tit box">
            <li class="flex text-left cancel c-999">取消</li>
            <li id="js-person-num-determine" class="flex text-right c-00b3cd determine">确定</li>
        </ul>
        <ul class="insurance-fixed-list">
            <li class="clear">
                <div class="price fl">
                    <h4><sub>￥</sub><span>20</span></h4>
                    <p>满1000元可用</p>
                </div>
                <div class="info fl">
                    <h5>20元抵扣券<span>（仅限票款）</span></h5>
                    <p>2017.12.12-2018.12.12</p>
                </div>
                <p class="choise fr"><i class="icon-select"></i></p>
            </li>
            <li class="clear">
                <div class="price fl">
                    <h4><sub>￥</sub><span>20</span></h4>
                    <p>满1000元可用</p>
                </div>
                <div class="info fl">
                    <h5>20元抵扣券<span>（仅限票款）</span></h5>
                    <p>2017.12.12-2018.12.12</p>
                </div>
                <p class="choise fr"><i class="icon-select"></i></p>
            </li>
        </ul>
    </div>

    <script type="text/javascript" src="../../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../js/public.js"></script>
    <script type="text/javascript" src="../../js/form.js"></script>
    <script type="text/javascript" src="../../js/LCalendar.js"></script>
    <script type="text/javascript" src="../../js/order.js"></script>
    <script type="text/javascript">
        // 出生日期选择
		var calendar = new LCalendar();
		calendar.init({
			'trigger': '#birth', //标签id
			'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
			'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期
			'maxDate': (new Date().getFullYear()+3) + '-' + 12 + '-' + 31 //最大日期
        });
        

    //    弹窗查询时间
        var calendar = new LCalendar();
        calendar.init({
            'trigger': '#start_date', //标签id
            'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
            'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期
            'maxDate': (new Date().getFullYear()+3) + '-' + 12 + '-' + 31 //最大日期
        });
        var calendar = new LCalendar();
        calendar.init({
            'trigger': '#end_date', //标签id
            'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
            'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期
            'maxDate': (new Date().getFullYear()+3) + '-' + 12 + '-' + 31 //最大日期
        });

	</script>
    
    <!-- <script>

        var nowDate = new Date();
        var nowYear = nowDate.getFullYear();
        var nowMouth = (nowDate.getMonth() + 1);
        var nowDay = nowDate.getDate();

        var yearScroll,mouthScroll,dateScroll;
        var yearNumVal = parseInt(nowYear)-30;
        var mouthNumVal = parseInt(nowMouth);
        var dayNumVal = parseInt(nowDay);
        var pastYear = parseInt(nowYear) - 100;

        $("#js-birth-num").click(function () {
            showHighMask();
            $("#js-birth-fixed").slideDown(200);
            if (!yearScroll || !mouthScroll || !dateScroll) {
                // greatYear();
                // greatMouth();
                // greatDay();
                var pastYear = parseInt(nowYear) - 100;
                greatDateHtml(pastYear, nowYear, $("#js-year-list"));
                greatDateHtml(1, 12, $("#js-mouth-list"));
                greatDateHtml(1, 31, $("#js-day-list"));
                
                var validDay = getDayCountByYearAndMonth(yearNumVal, mouthNumVal);
                $("#js-day-list").find("li").each(function () {
                    $(this).show();
                    var value = $(this).html() + "";
                    if (value && parseInt(value) > validDay) {
                        $(this).hide();
                    }
                });
                
                yearScroll = scrollBox("#birth-num1", "#scroller1", 70, yearCallBackFun);
                mouthScroll = scrollBox("#birth-num2", "#scroller2", mouthNumVal - 1, mouthCallBackFun);
                dateScroll = scrollBox("#birth-num3", "#scroller3", dayNumVal - 1, dateCallBackFun);
            }
            
            
            yearScroll.refresh();
            mouthScroll.refresh();
            dateScroll.refresh();
        })
        // 滑动年的回调函数
        function yearCallBackFun(obj) {
            yearNumVal = obj.currentPage.pageY + pastYear; //获取选择的年份
            if (yearNumVal > nowYear) yearNumVal = nowYear; 
            console.log("本次获取的年份为   == " + yearNumVal);
        }
        // 滑动月的回调函数
        function mouthCallBackFun(obj) {
            console.log("月份回调了");
            // yearScroll.refresh();
            mouthNumVal = obj.currentPage.pageY + 1;
            if (mouthNumVal > 12) mouthNumVal = 12;
            console.log("本次获取的月份为   == " + mouthNumVal)
            var validDay = getDayCountByYearAndMonth(yearNumVal, mouthNumVal);

            if(dayNumVal>validDay){
                dayNumVal=validDay;
            }
            $("#js-day-list").find("li").each(function () {
                $(this).show();
                var value = $(this).html() + "";
                if (value && parseInt(value) > validDay) {
                    $(this).hide();
                }
            });
            dateScroll.refresh();//刷新日期天数的显示
        }
        // 滑动日的回调函数
        function dateCallBackFun(obj) {
            // mouthScroll.refresh();
            dayNumVal = obj.currentPage.pageY + 1;
            // console.log("yearNumVal  ==  " + yearNumVal);
            // console.log("mouthNumVal  ==  " + mouthNumVal);
            var maxDay = getDayCountByYearAndMonth(yearNumVal, mouthNumVal + 1);
            console.log("maxDay  ==  " + maxDay);
            if (dayNumVal > maxDay) dayNumVal = maxDay;
            console.log("本次获取的日期为   == " + dayNumVal);
        }


        function greatDateHtml(startIndex, endIndex, obj) {
            var temp = "";
            for (var i = startIndex; i <= endIndex; i++) {
                temp += "<li>" + i + "</li>";
            }
            var emptyLi = "";
            for (var i = 0; i < 3; i++) {
                emptyLi += "<li></li>";
            }
            $(obj).html(emptyLi + temp + emptyLi);
        }

        // 生成可显示年份
        function greatYear() {
            var temp = "";
            for (var i = pastYear; i <= nowYear; i++) {
                temp += "<li>" + i + "</li>";
            }
            var emptyLi = "";
            for (var i = 0; i < 3; i++) {
                emptyLi += "<li>" + "</li>";
            }
            $("#js-year-list").html("");
            $("#js-year-list").append(temp);
            $("#js-year-list").append(emptyLi);//在前面添加空的li标签
            $("#js-year-list").prepend(emptyLi);//在后面添加空的li标签
        }
        // 生成可显示月份
        function greatMouth() {
            var temp = "";
            for (var i = 1; i <= 12; i++) {
                temp += "<li>" + i + "</li>";
            }
            var emptyLi = "";
            for (var i = 0; i < 3; i++) {
                emptyLi += "<li>" + "</li>";
            }
            $("#js-mouth-list").html("");
            $("#js-mouth-list").append(temp);
            $("#js-mouth-list").append(emptyLi);//在前面添加空的li标签
            $("#js-mouth-list").prepend(emptyLi);//在后面添加空的li标签
        }
        // 生成可显示日期
        function greatDay() {
            getDayCountByYearAndMonth(yearNumVal, mouthNumVal);

            var temp = "";
            for (var i = 0; i <= 31; i++) {
                temp += "<li>" + i + "</li>";
            }
            var emptyLi = "";
            for (var i = 0; i < 3; i++) {
                emptyLi += "<li>" + "</li>";
            }
            $("#js-day-list").html("");
            $("#js-day-list").append(temp);
            $("#js-day-list").append(emptyLi);//在前面添加空的li标签
            $("#js-day-list").prepend(emptyLi);//在后面添加空的li标签
        }

        /**
         * 计算该年该月的天数
         * @param year 年
         * @param month 月
         */
        function getDayCountByYearAndMonth(year, month) {
            month = parseInt(month, 10); //parseInt(number,type)这个函数后面如果不跟第2个参数来表示进制的话，默认是10进制。
            var temp = new Date(year, month, 0);
            return temp.getDate();;
        }

    </script> -->
</body>

</html>